<template>
    <div class="shenzhen-box">
        <div>
            <ul>
                <li>
                    <span class="map-status status-1"></span>
                    <span>0-40</span>
                </li>
                <li>
                    <span class="map-status status-2"></span>
                    <span>41-80</span>
                </li>
                <li>
                    <span class="map-status status-3"></span>
                    <span>81-120</span>
                </li>
                <li>
                    <span class="map-status status-4"></span>
                    <span>121-160</span>
                </li>
                <li>
                    <span class="map-status status-5"></span>
                    <span>161-200</span>
                </li>
                <li class="float-text">
                    <span>深圳市</span>
                </li>
            </ul>
        </div>
        <img src="../assets/shenzhen.png" alt="" class="shenzhenMap" />
    </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.shenzhen-box {
    ul {
        text-align: left;
        padding: 16px 0 10px 10px;
        li {
            display: inline-block;
            width: 60px;
            text-align: center;
        }
        list-style: none;
        span {
            display: block;
            font-size: 14px;
            margin-bottom: 4px;
        }
    }
    .float-text {
        float: right;
        width: 100px;
        span {
            font-size: 20px;
        }
    }
    .map-status {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        display: inline-block;
    }
    .status-1 {
        background: #61daa2;
        border: 6px solid #397763;
    }
    .status-2 {
        background: #afe92b;
        border: 6px solid #607f28;
    }
    .status-3 {
        background: #ffdf1d;
        border: 6px solid #887c2f;
    }
    .status-4 {
        background: #ec924b;
        border: 6px solid #7e5338;
    }
    .status-5 {
        background: #de6173;
        border: 6px solid #773b4c;
    }
    .shenzhenMap {
        width: 100%;
    }
}
</style>
